On CSS Menu Hacks

I've always wanted to emulate Apple's navigation bar. I've seen other similar navigation's that changed the background image on mouse hover. But this navigation bar went one further and has another special state for on mouse click that draws an outline on the button. So I whipped out my Firebug and dug into how this sucka worked.

It turns out to not be tedious and slow javascript operation, but a rather clever CSS hack. Instead of messing with the DOM whenever there's a mouse event, the clever solution is to selectively shift the background image around until the correct 'image state' is in view. In the image above, when a mouse hovers over a button, we shift the image up a row. To prevent all the buttons from being in a hover state, just have each button keeps a reference to it's own shifted background image. For a good clean tutorial, check out ghettocooler.